<template>
  <div class="page">
    <el-form :inline="true">
      <el-form-item>
        <el-button type="primary" @click="addKey">新增规格</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addValue">新增规格值</el-button>
      </el-form-item>
    </el-form>
    <!-- key -->
    <h1>规格管理</h1>
    <el-table :data="keyList" border>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="名称" prop="attributeName"></el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-text="启用中"
            inactive-text="已停用"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="editKey(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="space"></div>
    <!-- value -->
    <h1>规格值管理</h1>
    <el-table :data="valueList" border>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="名称" prop="attributeValue"></el-table-column>
      <el-table-column label="key名称">
        <template slot-scope="scope">
          {{ parseKeyName(scope.row.kid) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="editValue(scope.row)">编辑</el-button>
          <!-- <el-button type="text" @click="deleteValue(scope.row)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="新增规格"
      :visible.sync="keyShow"
      width="30%"
      :before-close="handleKeyClose"
    >
      <el-form :model="specForm">
        <el-form-item label="规格名称" label-width="80">
          <el-input
            v-model="specForm.attributeName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="keyShow = false">取 消</el-button>
        <el-button type="primary" @click="submitAddSpec"> 确 定 </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="新增Value"
      :visible.sync="valueShow"
      width="30%"
      :before-close="handleValueClose"
    >
      <el-form :model="valueForm">
        <el-form-item label="规格值选择">
          <el-select v-model="valueForm.kid">
            <el-option
              v-for="item in keyList"
              :key="item.id"
              :label="item.attributeName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="规格值名称" label-width="80">
          <el-input
            v-model="valueForm.attributeValue"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="valueShow = false">取 消</el-button>
        <el-button type="primary" @click="submitAddValue"> 确 定 </el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="编辑规格"
      :visible.sync="keyShow"
      width="30%"
      :before-close="handleKeyClose"
    >
      <el-form :model="valueForm">
        <el-form-item label="规格值名称" label-width="80">
          <el-input
            v-model="specForm.attributeName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="keyShow = false">取 消</el-button>
        <el-button type="primary" @click="submitAddSpec"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  listKey,
  getKey,
  delKey,
  addKey,
  updateKey,
  exportKey,
} from "@/api/ds/keyList";

import {
  listValue,
  getValue,
  delValue,
  addValue,
  updateValue,
  exportValue,
} from "@/api/ds/valueList";
export default {
  components: {},
  props: {},
  data() {
    return {
      keyList: [],
      valueList: [],
      keyShow: false,
      valueShow: false,

      specForm: {
        mode: "add",
        attributeName: "",
      },

      valueForm: {
        mode: "add",
        id: "",
        kid: "",
        attributeValue: "",
      },
    };
  },
  computed: {
    parseKeyName() {
      return (kid) => {
        let keyName = "";

        this.keyList.map((key) => {
          if (key.id === kid) {
            keyName = key.attributeName;
          }
        });
        return keyName;
      };
    },
  },
  watch: {},
  created() {
    this.getData();
  },
  methods: {
    addKey() {
      this.keyShow = true;
    },

    editKey(row) {
      this.specForm.mode = "edit";
      this.specForm.attributeName = row.attributeName;
      this.specForm.id = row.id;
      this.keyShow = true;
    },

    async submitAddSpec() {
      let query = { attributeName: this.specForm.attributeName, status: 1 };
      if (this.specForm.mode === "add") {
        let res = await addKey(query);
        if (res.code === 200) {
          console.log(res);
          this.keyShow = false;
          this.getData();
        }
      } else {
        query.id = this.specForm.id;
        let res = await updateKey(query);
        if (res.code === 200) {
          console.log(res);
          this.keyShow = false;
          this.getData();
        }
      }
    },

    editValue(row) {
      this.valueShow = true;
      this.valueForm.mode = "edit";
      this.valueForm.id = row.id;
      this.valueForm.kid = row.kid;
      this.valueForm.attributeValue = row.attributeValue;
    },

    deleteValue(row) {
      this.$confirm("此操作将删除该规格值, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await delValue(row.id);
          if (res.code === 200) {
            console.log(res);
          }
          this.getData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    addValue() {
      this.valueShow = true;
      this.valueForm.mode = "add";
      this.valueForm.id = 0;
      this.valueForm.kid = "";
      this.valueForm.attributeValue = "";
    },

    async submitAddValue() {
      if (this.valueForm.mode === "add") {
        let query = {
          kid: this.valueForm.kid,
          attributeValue: this.valueForm.attributeValue,
          status: 1,
        };
        let res = await addValue(query);
        if (res.code === 200) {
          console.log(res);
          this.valueShow = false;
          this.getData();
        }
      } else if (this.valueForm.mode === "edit") {
        let query = {
          id: this.valueForm.id,
          attributeValue: this.valueForm.attributeValue,
        };

        let res = await updateValue(query);
        if (res.code === 200) {
          this.$notify({
            type: "success",
            message: res.msg,
          });
          this.getData();
          this.valueShow = false;
        }
      }
    },

    handleKeyClose() {
      const _this = this;

      this.$confirm("确认关闭？")
        .then((_) => {
          _this.specForm = {
            attributeName: "",
          };
          done();
        })
        .catch((_) => {});
    },
    handleValueClose() {
      const _this = this;

      this.$confirm("确认关闭？")
        .then((_) => {
          _this.valueForm = {
            mode: "add",
            id: "",
            kid: "",
            attributeValue: "",
          };

          done();
        })
        .catch((_) => {});
    },
    async getData() {
      let keyRes = await listKey();
      if (keyRes.code === 200) {
        this.keyList = keyRes.rows;
      }

      let res = await listValue();
      if (res.code === 200) {
        this.valueList = res.rows;
      }
    },
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;

  box-sizing: border-box;
  padding: 10px;

  .space {
    width: 100%;
    height: 20px;
  }
}
</style>
